<template>
	<view>
		<h-page-meta></h-page-meta>
		<view class="back"><h-navigateBack></h-navigateBack></view>
		<image src="../../static/login/login_top.png" mode="widthFix" class="width-750"></image>
		<view class="flex flex-ac form-item" style="margin-top: 140rpx;">
			<image src="../../static/login/phone.png" mode="widthFix" class="width-30"></image>
			<view style="margin-left: 10rpx;">
				<input type="number" style="width: 550rpx;" placeholder="请输入手机号码" maxlength="11" placeholder-class="placeholderclass" v-model="phone" />
			</view>
		</view>
		<view class="flex flex-ac  flex-bt form-item">
			<view  class="flex flex-ac">
				<image src="../../static/login/code.png" mode="widthFix" class="width-30"></image>
				<view style="margin-left: 10rpx;">
					<input type="number" style="width: 300rpx;" placeholder="请输入验证码" placeholder-class="placeholderclass" v-model="code" />
				</view>
			</view>
			<view class="v-nocode fs-28"  v-if="!isGet" @click="getCode()">{{ text }}</view>
			<view class="v-code fs-28" v-if="isGet">已发送({{ time}}s)</view>
		</view>
		<view class="flex flex-ac form-item"> 
			<image src="../../static/login/password.png" mode="widthFix" class="width-30"></image>
			<view style="margin-left: 10rpx;">
				<input type="text" style="width: 550rpx;" placeholder="请输入密码" password="true" placeholder-class="placeholderclass" v-model="password" />
			</view>
		</view>
		<view class="flex flex-ac form-item">
			<image src="../../static/login/password.png" mode="widthFix" class="width-30"></image>
			<view style="margin-left: 10rpx;">
				<input type="text" style="width: 550rpx;" placeholder="请再次输入密码" password="true" placeholder-class="placeholderclass" v-model="passwordTwo" />
			</view>
		</view>
		<view class="flex flex-ac flex-jc bg-main pd-30 fs-34 bt-login" hover-class="u-hover-class" @click="register">注册</view>
	</view>
</template>

<script>
	var _self;
	let timeInter='';
export default {
	data() {
		return {
			phone: '',
			code: '',
			password: '',
			passwordTwo: '',
			isGet:false,
			text: '获取验证码',
			time:60,
			verifyCode:''
		};
	},
	onLoad() {
		_self = this;
	},
	onUnload() {
		clearInterval(timeInter);
	},
	methods: {
		//获取验证码
		getCode() {
			if(!this.$h.verify.isPhone(this.phone)){
				uni.showToast({
					title:'请输入正确的手机号',
					icon:'none',
					mask:true
				})
				return ;
			}else{
				_self.GetSmsByTel();
			}
			this.isGet=true;
			this.timeInterval();
		},
		//----------------------------------------获取短信验证码----------------------------------------
		GetSmsByTel:function(){
			uni.request({
				url:_self.$h.expressInterface.expressInterface.GetSmsByTel.url,
				method:_self.$h.expressInterface.expressInterface.GetSmsByTel.method,
				header:_self.$h.expressInterface.expressInterface.GetSmsByTel.header,
				data:{
					tel:_self.phone,
					appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode
				},success:function(res){
					console.log('成功返回',res);
					if(res.data.Success){
						_self.$u.toast('发送验证码成功');
						_self.verifyCode = res.data.Data;
					}else {
						_self.$u.toast('发送验证码失败');
					}
				},fail:function(res){
					console.log('失败返回',res);
					_self.$u.toast('网络错误');
				}
			})
		},
		register() {
			if(!this.$h.verify.isPhone(this.phone)){
				uni.showToast({
					title:'请输入正确的手机号',
					icon:'none',
					mask:true
				})
				return ;
			}
			if(this.passwordTwo!==this.password){
				uni.showToast({
					title:'两次输入的密码不匹配，请重新输入',
					icon:'none',
					mask:true
				})
				return ;
			}
			if(!this.$h.verify.passwordCheck(this.password)){
				uni.showToast({
					title:'密码强度太弱，最少8位密码',
					icon:'none',
					mask:true
				})
				return ;
			}
			if(_self.code != _self.verifyCode){
				_self.$u.toast('验证码错误');
				return ;
			}
			_self.GetRegisterByTel();
		},
		//----------------------------------------用户注册----------------------------------------
		GetRegisterByTel:function(){
			uni.request({
				url:_self.$h.expressInterface.expressInterface.GetRegisterByTel.url,
				method:_self.$h.expressInterface.expressInterface.GetRegisterByTel.method,
				header:_self.$h.expressInterface.expressInterface.GetRegisterByTel.header,
				data:{
					tel:_self.phone,
					password:_self.password,
					appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode
				},success:function(res){
					console.log('成功返回',res);
					if(res.data.Success){
						_self.$u.toast('注册成功');
						uni.setStorage({
							key:'userInfo',
							data:JSON.parse(res.data.Data)
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else {
						_self.$u.toast('注册失败');
					}
				},fail:function(res){
					console.log('失败返回',res);
					_self.$u.toast('网络错误');
				}
			})
		},
		timeInterval(){
			let that=this;
			timeInter=setInterval(function(){
				that.time--;
				if(that.time==0){
					that.isGet=false;
					that.time=60;
					clearInterval(timeInter);
				}
			},1000)
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.form-item {
	margin: 0 80rpx;
	padding: 40rpx 0;
	border-bottom: solid 1rpx #eaeaea;
}
.bt-login {
	margin: 50rpx;
	margin-top: 90rpx;
	border-radius: 50rpx;
	color: #fff;
	letter-spacing: 4rpx;
	box-shadow: 0px 7px 38px 8px rgba(235, 6, 70, 0.15);
}
.v-nocode {
	width: 190rpx;
	border: 1rpx solid #fc4646;
	border-radius: 12rpx;
	color: #fc4646;
	margin-left: 30rpx;
	text-align: center;
	padding: 10rpx 20rpx;
}
.v-code {
	width: 190rpx;
	border: 1rpx solid #EAEAEA;
	border-radius: 12rpx;
	color: #999;
	margin-left: 30rpx;
	text-align: center;
	padding: 10rpx 20rpx;
}
.back{
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		background-color: #FFF;
		border-radius:100%;
		top: 60rpx;
		left: 30rpx;
		z-index: 999999;
		background: linear-gradient(270deg, #fdfdfd, #FFF)
	}
</style>
